import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import {Icon,} from 'react-native-elements';



type Props = {};



export default class UserProfileView extends Component<Props> {



  constructor(props)
  {
    super(props);
    if(global.userObject==undefined)
      {
        this.state ={
            username : null,
            emailAddress : null,
          }
        global.dataManager.getUserProfileData().then((userInfo)=>{
          console.log(userInfo);
          global.userObject = userInfo;
          this.setState({
            username : userInfo.name,
            emailAddress : userInfo.email,
          });
          if(userInfo.email=="")
          {
            this.setState({
              emailAddress : 'Email',
            });
          }
          if(userInfo.name=="Unnamed User")
          {
            this.setState({
              username : 'Name',
            });
          }
          console.log('User Name set',this.state.username);
        });
      }else{
        this.state={
            username : global.userObject.name,
            emailAddress : global.userObject.email,
        }
      }
  }


  componentWillUnmount() {

    this.updateUserProfileData();
    
  }

  getIsClearUserName()
  {
    if(global.userObject==undefined || global.userObject.name=='Unnamed User' || this.state.username=='Name')
    {
      return true;
    }else{
      return false;
    }
  }

  getIsClearEmailAddress()
  {
    if(global.userObject==undefined || global.userObject.email=='' || this.state.emailAddress=='Email')
    {
      return true;
    }else{
      return false;
    }
  }

  updateUserProfileData()
  {
    global.userObject.name = this.state.username;
    global.userObject.email = this.state.emailAddress;
    global.dataManager.updateUserProfileData(global.userObject);
  }


  static navigationOptions = ({navigation}) => {
    return {
      title: "User Profile View"
    };
  }


  


  

  render() {
    
    // console.log("Rendering finished",this.state.username);
    return (
      <View style={styles.userProfileContainer}>
        <View style={styles.downArrowContainer}>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <Icon name='keyboard-arrow-down' color='#ADADAD' size={50}/>
          </TouchableOpacity>
        </View>
        <View style={styles.userImageContainer}>
          <Icon name='account-circle' color='#ADADAD' size={200}/>
        </View>
        <View style={styles.userInfoContainer}>
          <View style={styles.usernamePanel}>
            <View style={{width:20}}></View>
            <Icon name='perm-identity' color='#3C3C3C' size={30}/>
            <View style={{width:10}}></View>
            <TextInput style={styles.textInputStyle} 
            onChangeText={(username) => this.setState({username})} value={this.state.username} 
            onEndEditing = {()=> this.updateUserProfileData()} clearTextOnFocus={this.getIsClearUserName()}/>
          </View>
          <View style={styles.usernamePanel}>
            <View style={{width:20}}></View>
            <Icon name='email' color='#3C3C3C' size={30}/>
            <View style={{width:10}}></View>
            <TextInput style={styles.textInputStyle}
            onChangeText={(emailAddress) => this.setState({emailAddress})} value={this.state.emailAddress}
            onEndEditing = {()=> this.updateUserProfileData()} clearTextOnFocus={this.getIsClearEmailAddress()}/>
          </View>
        </View>
        <View style={styles.blankSpaceAtBottom}>
        </View>
      </View>
    );
  }
  
}

const styles = StyleSheet.create({
  
  userProfileContainer: {
    flex: 6,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3C3C3C',
  },
  downArrowContainer: {
    width:350,
    flexDirection:'row',
    paddingVertical: 20,
    justifyContent: 'flex-end',
  },
  userImageContainer: {
    flex: 9,
    justifyContent: 'center',
  },
  userInfoContainer: {
    flex: 4,
    justifyContent: 'space-between',
  },
  textInputStyle: {
    color: '#000',
    height: 40,
    width: 200,
    fontSize: 20,
  },
  blankSpaceAtBottom: {
    flex: 6,
  },
  usernamePanel: {
    backgroundColor: '#ADADAD', 
    height: 50,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1,
    width: 300,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 25,
    // justifyContent: 'center',
  }
  
});
